<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <style>
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
      .container:after {
        content: '';
        display: block;
        clear: both;
      }
      .container img {
        width: 45%;
        height: 260px;
        margin: 10px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="1"
        data-src="http://img4.imgtn.bdimg.com/it/u=951914923,777131061&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="2"
        data-src="http://img1.imgtn.bdimg.com/it/u=1813891576,1754763093&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="3"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="4"
        data-src="http://img1.imgtn.bdimg.com/it/u=1813891576,1754763093&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="5"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="6"
        data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="7"
        data-src="http://img3.imgtn.bdimg.com/it/u=85690711,3884201894&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="8"
        data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="9"
        data-src="http://img0.imgtn.bdimg.com/it/u=1846695025,2515725663&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="10"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="11"
        data-src="http://img5.imgtn.bdimg.com/it/u=3478148120,2683867435&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="12"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="13"
        data-src="http://img2.imgtn.bdimg.com/it/u=4201594846,4178139206&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="14"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="15"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="16"
        data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="17"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="18"
        data-src="http://img1.imgtn.bdimg.com/it/u=779005622,2247570143&fm=200&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="19"
        data-src="http://img1.imgtn.bdimg.com/it/u=1968229118,3512711019&fm=26&gp=0.jpg"
      />
      <img
        src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
        alt="20"
        data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"
      />
    </div>

    <script>
      // 一开始没有滚动的时候，出现在视窗中的图片也会加载
      start()

      // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片

      let throttleStart = throttle(start, 80)

      $(window).on('scroll', function () {
        throttleStart()
      })

      function start() {
        $('.container img')
          .not('[data-isLoading]')
          .each(function () {
            if (isShow($(this))) {
              loadImg($(this))
            }
          })
      }

      // 判断图片是否出现在可视区域的函数
      function isShow($node) {
        return $node.offset().top <= $(window).height() + $(window).scrollTop()
      }

      // 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
      function loadImg($img) {
        $img.attr('src', $img.attr('data-src'))

        // 已经加载的图片，我给它设置一个属性，值为1，作为标识
        // 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
        $img.attr('data-isLoading', 1)
      }

      // 节流函数
      // func是用户传入需要节流的函数
      // wait是等待时间
      function throttle(func, wait = 50) {
        // 上一次执行该函数的时间
        let lastTime = 0
        return function (...args) {
          // 当前时间
          let now = +new Date()

          // 将当前时间和上一次执行函数时间对比，如果差值大于设置的等待时间就执行函数
          if (now - lastTime > wait) {
            lastTime = now
            func.apply(this, args)
          }
        }
      }

      // setInterval(() => {
      //   console.log(1)
      // })

      // setInterval(
      //   throttle(() => {
      //     console.log(1)
      //   }, 1000)
      // )
    </script>
  </body>
</html>
